import React from 'react';
import { List, InputItem, WingBlank } from 'antd-mobile';
import UsersTags from "components/usersTags/UsersTags";
import { UserAddOutlined } from '@ant-design/icons';
import router from "umi/router";
import { openNotificationWithIconPhone } from "utils/comm"
import { Form, Row } from 'antd';
import PhonePersonPicker from 'components/formily/components/PhonePersonPicker';
// import PhonePersonPicker from 'components/formily/components/PhonePersonPicker';
import styles from './FlowHandleBaseFormPhoneMixin.less';


const FlowHandleBaseFormPhoneMixin = {
  // 调用此方法会取消之前的Toast.loading
  // 调用此方法之后不能马上调用Toast.hide
  openNotificationWithIcon(type, _, msg) {
    openNotificationWithIconPhone(type, msg);
  },

  getCustomRender(title, customUsers,children, disabled) {
    const that = this;
    return (v, onShow) => {
      return (
        <>
          <Form.Item label="">
            <Row type="flex" align="middle" justify="space-between">
              <span className={[styles.title, 'dynamic-color'].join(' ')}>消息接收人</span>
              { children }
              { that.renderAddCheckUsers(title, customUsers, disabled) }
              <UserAddOutlined onClick={onShow} /> 
            </Row>
          </Form.Item>
          {customUsers.map((item) => {
            return (
              <UsersTags
                key={`${item.userCode}`}
                label={item.userName}
                onClick={() => that.noticeTagClose(item)}
                disabled={disabled}
              />
            );
          })}
        </>
      );
    };
  },

  renderNoticeSetting(title, customUsers,children, disabled) {
    const { noticeUsers } = this.state;
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <WingBlank className={[styles.msgContainer, 'dynamic-theme'].join(' ')}>
        <div className={styles.header}>
          <span className={[styles.title, 'dynamic-color'].join(' ')}>消息通知</span>
        </div>
        <Form.Item label="">
          <List>
            {getFieldDecorator("messageThemName", {
              rules: [
                { required: true, message: "请联系管理员配置对应的通知消息主题" },
              ],
            })(
              <InputItem
                disabled
              >
                通知消息主题
              </InputItem>
            )}
          </List>
        </Form.Item>
        <PhonePersonPicker
          params={{
            params: {
              multiple: true,
            },
          }}
          value={noticeUsers}
          onChange={(values) => {
            const formatedItems = [];
            (values || []).forEach((i)=> {
              const { value, label } = i;
              formatedItems.push({
                ...i,
                // for base class usage
                userCode: value,
                userName: label,
              });
            });
            this.handleNoticeUserOk(formatedItems);
          }}
          customRender={(...args) => {
            return this.getCustomRender
              (title, customUsers, children,disabled)
              (...args);
          }}
        />
      </WingBlank>
    );

  },

  getTaskId() {
    const { location: { query: { taskId } = {} } } = this.props;
    return taskId;
  },

  getApplyUserId() {
    const { location: { query: { applyUserId } = {} } } = this.props;
    return applyUserId;
  },
}

export const defaultPropsMixin = {
  onCancel() {
    router.goBack();
  },
};
export { styles };
export default FlowHandleBaseFormPhoneMixin;
